import React, { useContext } from "react";
import { StyleSheet, View, Text, TouchableOpacity } from "react-native";

import { createBottomTabNavigator } from "@react-navigation/bottom-tabs";
import MaterialCommunityIcons from "react-native-vector-icons/MaterialCommunityIcons";
import { createStackNavigator } from "@react-navigation/stack";
import Icon from "react-native-vector-icons/Ionicons";
import MIcon from "react-native-vector-icons/MaterialCommunityIcons";
import { MaterialIcons } from "@expo/vector-icons";

import SupplierNavigation from "../navigation/SupplierNavigation";
import UserNavigation from "../navigation/UserNavigation";
import { useSelector } from "react-redux";
import PersonMessageNavigation from "../navigation/PersonMessageNavigation";
import UserFormNavigation from "../navigation/UserFormNavigation";
import HomeScreen from "./HomeScreen";
import DetailScreen from "./DetailScreen";
import ExploreScreen from "./user/photoingScreen";
import ProfileScreen from "./ProfileScreen";

const HomeStack = createStackNavigator();
const DetailStack = createStackNavigator();

const Tab = createBottomTabNavigator();

const CustomTabBarButton = ({ children, onPress }) => {
  return (
    <TouchableOpacity
      style={{
        top: -20,
        justifyContent: "center",
        alignItems: "center",
        ...styles.shadow,
      }}
      onPress={onPress}
    >
      <View
        style={{
          width: 60,
          height: 60,
          borderRadius: 30,
          backgroundColor: "#e91e63",
        }}
      >
        {children}
      </View>
    </TouchableOpacity>
  );
};

const MainTabScreen = ({ Navigation }) => {
  return (
    <Tab.Navigator
      screenOptions={{
        tabBarShowLabel: false,
        tabBarActiveTintColor: "#e91e63",
        tabBarStyle: {
          position: "absolute",
          bottom: 20,
          left: 17,
          right: 17,
          backgroundColor: "#fff",
          borderRadius: 15,
          height: 60,
          ...styles.shadow,
        },
      }}
    >
      <Tab.Screen
        name="Home"
        component={UserNavigation}
        options={{
          headerShown: false,
          tabBarIcon: ({ color, size }) => (
            <View
              style={{
                alignItems: "center",
                justifyContent: "center",
              }}
            >
              <MaterialCommunityIcons name="home" color={color} size={size} />
              <Text style={{ fontSize: 10, color: color }}>首页</Text>
            </View>
          ),
        }}
      />
      <Tab.Screen
        name="Photo"
        component={UserFormNavigation}
        options={{
          headerShown: false,
          tabBarIcon: ({ color, size }) => (
            <MaterialCommunityIcons name="plus" size={27} color="#fff" />
          ),
          tabBarButton: (prop) => <CustomTabBarButton {...prop} />,
        }}
      />
      <Tab.Screen
        name="Mine"
        component={PersonMessageNavigation}
        options={{
          headerShown: false,
          tabBarIcon: ({ color, size }) => (
            <View
              style={{
                alignItems: "center",
                justifyContent: "center",
              }}
            >
              <MaterialCommunityIcons
                name="account"
                color={color}
                size={size}
              />

              <Text style={{ fontSize: 10, color: color }}>我的</Text>
            </View>
          ),
        }}
      />
    </Tab.Navigator>
  );
};

const styles = StyleSheet.create({
  shadow: {
    shadowColor: "#F9be7d",
    shadowOffset: {
      width: 0,
      height: 10,
    },
    shadowOpacity: 0.25,
    shadowRadius: 3.5,
    elevation: 5,
  },
});

// const MainTabScreen = ({ navigation }) => (
//   <Tab.Navigator
//     initialRouteName="LALALA"
//     screenOptions={{
//       tabBarActiveTintColor: "#e91e63",
//       headerStyle: { backgroundColor: "#009387" },
//       headerTintColor: "#fff",
//       tabBarHideOnKeyboard: true,
//     }}
//   >
//     <Tab.Screen
//       name="LALALA"
//       component={UserNavigation}
//       options={{
//         headerShown: false,
//         // title: 'IWILLBERICHER',
//         tabBarLabel: "首页",
//         // tabBarInactiveBackgroundColor: '#009387',
//         // tabBarActiveBackgroundColor:'009387',
//         tabBarIcon: ({ color, size }) => (
//           <MaterialCommunityIcons name="home" color={color} size={size} />
//         ),
//         headerTitleAlign: "center",
//         headerLeft: () => (
//           <MIcon.Button
//             name="menu"
//             style={{ backgroundColor: "#009387" }}
//             size={25}
//             onPress={() => navigation.openDrawer()}
//           />
//         ),
//       }}
//     />
//     <Tab.Screen
//       name="Detail"
//       component={SupplierNavigation}
//       options={{
//         headerShown: false,
//         tabBarLabel: "商家",

//         tabBarIcon: ({ color, size }) => (
//           <MaterialCommunityIcons name="bell" color={color} size={size} />
//         ),
//         tabBarBadge: 3,
//       }}
//     />
//     <Tab.Screen
//       name="拍照识别"
//       component={UserFormNavigation}
//       options={{
//         headerShown: false,
//         tabBarLabel: "拍照识别",
//         tabBarIcon: ({ color, size }) => (
//           <MaterialIcons name="add-a-photo" size={size} color={color} />
//           // <MaterialCommunityIcons name="account" color={color} size={size} />
//         ),
//       }}
//     />
//     <Tab.Screen
//       name="Profile"
//       component={PersonMessageNavigation}
//       options={{
//         headerShown: false,
//         tabBarLabel: "我的",
//         tabBarIcon: ({ color, size }) => (
//           <MaterialCommunityIcons name="account" color={color} size={size} />
//         ),
//       }}
//     />
//   </Tab.Navigator>
// );

export default MainTabScreen;

// const HomeStackScreen = ({ navigation }) => (
//   <HomeStack.Navigator
//     screenOptions={{
//       headerStyle: { backgroundColor: '#009387' },
//       headerTintColor: '#fff',
//       headerTitleStyle: {
//         fontWeight: 'bold',
//       },
//     }}
//   >
//     <HomeStack.Screen
//       name="MMMM"
//       component={HomeScreen}
//       options={{
//         title: 'Overview',
//         headerLeft: () => (
//           <Icon.Button name="ios-menu" size={25} backgroundColor="#009387" onPress={() => navigation.openDrawer()} />
//         ),
//       }}
//     />
//   </HomeStack.Navigator>
// );

// const DetailStackScreen = ({ navigation }) => (
//   <DetailStack.Navigator
//     screenOptions={{
//       headerStyle: { backgroundColor: '#009387' },
//       headerTintColor: '#fff',
//       headerTitleStyle: {
//         fontWeight: 'bold',
//       },
//     }}
//   >
//     <DetailStack.Screen name="Home" component={DetailScreen} />
//   </DetailStack.Navigator>
// );
